<template>
  <div class="content-box">
    <div class="scroll-view-box">
      <div class="data-box-left" v-if="dataObj">
        <div class="user-title-box" v-if="$fieldShowFunc('22-xmxx')">项目信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="项目名称" v-if="$fieldShowFunc('rz_xmmc')">
            <div slot="label" class="justify_7">项目名称</div>
            {{ dataObj.project_name }}
          </el-descriptions-item>
          <el-descriptions-item label="项目编号" v-if="$fieldShowFunc('rz_xmbh')">
            <div slot="label" class="justify_7">项目编号</div>
            <span class="click-color" @click="hrefProjectFunc">{{ dataObj.project_number }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="项目品牌" v-if="$fieldShowFunc('rz_xmpp')">
            <div slot="label" class="justify_7">项目品牌</div>
            {{ dataObj.brand_name }}
          </el-descriptions-item>
          <el-descriptions-item label="项目类型" v-if="$fieldShowFunc('rz_xmlx')">
            <div slot="label" class="justify_7">项目类型</div>
            {{ dataObj.store_type_name }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(1, 1, 0)" :key="key"></el-descriptions-item>
        </el-descriptions>
        <div class="user-title-box" v-if="$fieldShowFunc('22-sgrz')">施工日志</div>

        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="施工阶段" v-if="$fieldShowFunc('rz_sgjd')">
            <div class="justify_7" slot="label">施工阶段</div>
            {{ dataObj.construction_stage || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="风险标签" v-if="$fieldShowFunc('rz_fxbq')">
            <div class="justify_7" slot="label">风险标签</div>
            {{ dataObj.risk_label || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="现场照片/视频" v-if="$fieldShowFunc('rz_xczpsp')">
            <div class="justify_7" slot="label">现场照片/视频</div>
            <div class="file-box-img-box flex ac">
              <div class="file-box-img" v-for="(item, index) in dataObj.construction_files" :key="index">
                <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                  <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
                </el-tooltip>
              </div>
            </div>
            <span v-if="!dataObj.construction_files.length">--</span>
          </el-descriptions-item>
          <el-descriptions-item label="施工内容" v-if="$fieldShowFunc('rz_sgnr')">
            <div class="justify_7" slot="label">施工内容</div>
            {{ dataObj.content || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="是否超期" v-if="$fieldShowFunc('rz_sfcq')">
            <div class="justify_7" slot="label">是否超期</div>
            {{ dataObj.is_overdue == 1 ? '是' : '否' }}
          </el-descriptions-item>
          <el-descriptions-item label="超期类型" v-if="$fieldShowFunc('rz_cqlx')">
            <div class="justify_7" slot="label">超期类型</div>
            {{ dataObj.overdue_type || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="预计完工日期" v-if="$fieldShowFunc('rz_yjwgrq')">
            <div class="justify_7" slot="label">预计完工日期</div>
            {{ dataObj.estimated_completion_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="超期完工日期" v-if="$fieldShowFunc('rz_cqwgrq')">
            <div class="justify_7" slot="label">超期完工日期</div>
            {{ dataObj.overdue_completion_date || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="超期原因" v-if="$fieldShowFunc('rz_cqyy')">
            <div class="justify_7" slot="label">超期原因</div>
            {{ dataObj.reason_overdue || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="创建人" v-if="$fieldShowFunc('rz_cjr')">
            <div class="justify_7" slot="label">创建人</div>
            {{ dataObj.handlers_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间" v-if="$fieldShowFunc('rz_cjsj')">
            <div class="justify_7" slot="label">创建时间</div>
            {{ dataObj.created_at || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="备注" v-if="$fieldShowFunc('rz_bz')">
            <div class="justify_7" slot="label">备注</div>
            {{ dataObj.remark || '--' }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(1, 1, 1)" :key="key"></el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>
<script>
import engineeringApi from "@/api/engineeringApi";
import projectMsg from "@/components/ProjectMsg";
export default {
  name: 'constructionLogDetailPage',
  components: {
    projectMsg,
  },
  data() {
    return {
      dataObj: ''
    };
  },
  computed: {

  },
  mounted() {
    this.constructionLogDetails();
  },
  methods: {
    constructionLogDetails() {
      if (!this.$route.query.id) return;
      engineeringApi.constructionLogDetails({
        construction_log_id: this.$route.query.id
      }).then(res => {
        console.log(res, "施工日志详情")
        if (res.code == 200) {
          this.dataObj = res.data;
        }
      })
    },
    hrefProjectFunc() {
      this.$router.push({ path: '/projectDetailNew', query: { id: this.dataObj.project_id } })
    },
  },
};
</script>
<style lang="scss" scoped>
@import '@/styles/detail.scss';
</style>
<style lang="scss">
.labelClassName {
  width: 160px;
  background: #f5f8fe !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.contentClassName {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #1b2431 !important;
  padding-left: 20px !important;
}

.labelClassName2 {
  width: 160px;
  background: rgba(0, 0, 0, 0) !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: none !important;
}

.contentClassName2 {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #1b2431 !important;
  padding-left: 20px !important;
  border: none !important;
}
</style>